<template>
<view style="color: #fff;">
	<view style="display: flex;justify-content: space-between;align-items: center;">
		<view style="display: flex;align-items: center;">
			<view style="background-color: #d9d9d9;border-radius: 50%; width: 35px;height: 35px;">
				<image :src="user.headimgUrl?user.headimgUrl:'/static/img/Telegram.png'" style="width: 35px;height: 35px; border-radius: 50%; "></image>
			</view>
			<view style="margin-left: 10px; font-size: 14px;">{{user.userName}}</view>
		</view>
		<view style="width: 30%; display: flex;justify-content: space-between;">
			<view class="center" style="border: 1px solid #C1E3FF33; width: 41px;height: 41px;border-radius: 10px;">
				<image style="width: 24px;height: 24px;" src="/static/img/message-question-circle.png"></image>
			</view>
			<view @click="walletOpenHandel" class="center" style="border: 1px solid #C1E3FF33; width: 41px;height: 41px;border-radius: 10px;">
				<image style="width: 24px;height: 24px;" src="/static/img/wallet-02.png"></image>
			</view>
		</view>
	</view>
	<view style="margin-top: 20px;"></view>
	<view style="display: flex;justify-content: space-between;">
		<view style="height:67px;width: 48%;border-radius: 10px;background: #546C7F33;">
			<view style="padding: 15px; display: flex; justify-content: space-between;">
				<view>
					<view style="font-size: 12px;">Points</view>
					<view style="font-size: 14px;margin-top: 5px;">{{user.points}}</view>
				</view>
				<view>
					<image style="width: 14px;height: 14px;" src="/static/img/info-circle.png"></image>
				</view>
			</view>
		</view>
		<view style="height:67px;width: 48%;border-radius: 10px;background: #546C7F33;" @click="walletListHandel">
			<view style="padding: 15px; display: flex; justify-content: space-between;">
				<view>
					<view style="font-size: 12px;">Lives left today</view>
					<view style="font-size: 14px;margin-top: 5px;">{{user.hp}}</view>
				</view>
				<view>
					<image style="width: 14px;height: 14px;" src="/static/img/info-circle.png"></image>
				</view>
			</view>
		</view>
	</view>
	<!-- 新建钱包账号 start -->
	<uni-popup
		width="100%"
		ref="walletStatu"
		 background-color="#1B2025"
		 bottom
		 type="bottom"
		 borderRadius="10px 10px 0 0"
		 @change="change">
		<view class="popup-content">
			 <view class="title">
			 	<view class="title_name">Deposit Wallet</view>
				<view class="title_icon" @click="$refs.walletStatu.close()" >
					X
				</view>
			 </view>
			<view class="input_name">
				Enter your Base chain wallet address to receive $DAWG airdrop
			</view>
			<input class="uni-input" v-model="walletUrl" focus placeholder="Automatically gain focus" />
			<button @click="walletCloseHandel" class="sbumit_bnt" size="default" type="default"
				hover-class="is-hover">Send Link</button>
		</view>
	</uni-popup>
	<!-- 新建钱包账号 end -->
	<!-- 钱包账号列表 start -->
	<uni-popup
		width="100%"
		ref="walletList"
		 background-color="#1B2025"
		 bottom
		 type="bottom"
		 borderRadius="10px 10px 0 0"
		 @change="change">
		<view class="popup-content">
			 <view class="title">
			 	<view class="title_name">Deposit Wallet</view>
				<view class="title_icon" @click="$refs.walletList.close()" >
					X
				</view>
			 </view>
			<view class="input_name">Choose your wallet to receive airdrop</view>
			<view class="list_name">
				<view class="list_item" v-for="item in 12" :key="item">Metamask</view>
			</view>
		</view>
	</uni-popup>
	<!-- 钱包账号列表 end -->
</view>
</template>

<script>
	import {request} from '@/api/api.js'
	export default {
		data(){
			return{
				user:{
					
				},
				walletUrl:''
			}
		},

		mounted() {
			this.taskGetData()
		},
		methods:{
	
			walletOpenHandel(){
				this.$refs.walletStatu.open()
			},
			walletCloseHandel(){
				request({url:'/walletinfo',method:'POST',data:{walletUrl:this.walletUrl}}).then(res => {
					console.log('res',res)
					this.walletUrl = ''
					this.$refs.walletStatu.close()
				})
			},
			walletListHandel(){
				this.$refs.walletList.open()
			},
			walletListCloseHandel(){
				this.$refs.walletList.close()
			},
			// 获取用户信息接口
			taskGetData(){
				request({url:'/userinfo',method: 'GET',}).then(res => {
					console.log('res',res)
					if(res.code == 200){
						this.user = res.data
					}
				})
			
			}
		}
	}
</script>

<style scoped lang="scss">
	.popup-content{
		width: calc(100% - 40px);
		overflow: auto;
		margin: 0 auto;
		.title{
			width: 100%;
			display: flex;
			justify-content: space-between;
			.title_name{
				height: 40px;
				line-height: 40px;
				padding: 10px 0;
				font-family: Inter;
				font-size: 26px;
				font-weight: 600;
				line-height: 40px;
				text-align: left;
	
	
			}
			.title_icon{
				width: 20px;
				height: 20px;
				margin: 20px 0;
				display: flex;
				justify-items: end;
				text-align: center;
			}
		}
		.input_name{
			width: 100%;
			font-family: Inter;
			font-size: 15px;
			font-weight: 500;
			line-height: 22px;
			letter-spacing: -0.4000000059604645px;
			text-align: left;
			margin-bottom: 20px;
		}
		.list_name{
			width: 100%;
			height: 60vh;
			.list_item{
				width: calc(100% - 100px);
				margin: 10px auto;
			}
		}
		.uni-input{
			width: calc(100% - 20px);
			height: 40px;
			background-color: rgba(255, 255, 255, 0.16);
			border-radius: 5px;
			padding:5px 10px;
			margin-bottom: 20px;
		}
		.sbumit_bnt{
			color: #000;
			background-color:  rgba(246, 203, 35, 1);
			border-color: rgba(246, 203, 35, 1);
			margin-bottom: 50px;
			margin-top: 50px;
			font-family: Inter;
			font-size: 17px;
			font-weight: 600;
			text-align: center;
	
		}
	}
	
	.head{
		width: calc(100% - 40rpx);
		padding: 20rpx;
		display: flex;
		.headImage{
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: none;
			}
		}
		.headName{
			width: 80%;
			height: 100rpx;
			line-height: 100rpx;
			color: #fff;
		}
		.headIcon{
			display: flex;
			flex-direction: row-reverse;
			image{
				width: 70rpx;
				height: 70rpx;
				margin: 15rpx 0;
			}
			image:first-child{
				margin-left: 20rpx;
			}
		}
	}
</style>